import * as React from 'react';
import './index.css';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { aura } from '@uiw/codemirror-theme-aura';
import { convertInterfaceCommentsToSingleLine, genApiFunction } from './utils';
import vscode, { webViewPostMessage } from '../../../../utils/ui-bridge';


export default function InsertPage() {
  const [ url, setUrl ] = React.useState<string>('');
  const [ data, setData ] = React.useState<any>({});

  const [ req, setReq ] = React.useState<any>('');
  const [ res, setRes ] = React.useState<any>('');
  const [ mock, setMock ] = React.useState<any>('');
  const [ showCookie, setShowCookie ] = React.useState<boolean>(false);
  const [ cookie, setCookie ] = React.useState<string>('');


  const getSchema = async (id: number) => {
    /** 以 node 形式发送，解决 webview 跨域问题 */
    webViewPostMessage('getYapiInterface', {
      id,
    }, (res:any) => {
      setData(res);
    });
  };

  React.useEffect(() => {
    webViewPostMessage('compileJSON', {
      req_body_other: data?.req_body_type === 'json' ? data?.req_body_other : JSON.stringify({}),
      res_body: data?.res_body_is_json_schema ? data?.res_body : JSON.stringify({}),
      path: data?.path ?? '',
    }, (res:any) => {
      console.log('compileJSON', res);
      const { reqSchema, resSchema, resSchemaMock } = res;

      setReq(reqSchema);
      setRes(resSchema);
      setMock(resSchemaMock || '');
    });
  }, [
    data,
  ]);

  React.useEffect(() => {
    webViewPostMessage('getCookie', {}, (res) => {
      console.log('getCookie', res);
      setCookie(res);
    });
  }, []);

  const urlOnChange = (e:any) => {
    setUrl(e.target.value.split('/').pop());
    getSchema(e.target.value.split('/').pop());
  };

  const cookieOnChange = (e:any) => {
    webViewPostMessage('setCookie', {
      cookie: e.target.value,
    });
    setCookie(e.target.value);
  };

  return <React.Fragment>
    <div className='input-container'>
      <input
        type="text"
        id="name"
        placeholder="请输入接口名称"
        className='url-input'
        onChange={urlOnChange}
      />
      <i className="setting" onClick={() => setShowCookie(!showCookie)}>⚙️</i>
    </div>
    {
      showCookie && (
        <div>
          yapi cookie:
          <div className='input-container'>
            <input
              type="text"
              id="name"
              placeholder="请输入cookie"
              className='url-input'
              value={cookie}
              onChange={cookieOnChange}
            />
          </div>
        </div>
      )
    }

    {
      data?.path && (
        <React.Fragment>
          <h4>方法</h4>
          <div style={{ maxHeight: '300px', overflow: 'auto' }}>
            <CodeMirror
              value={genApiFunction(data)}
              theme={aura}
              extensions={[ javascript({ jsx: true }) ]}
            ></CodeMirror>
          </div>

          <h4>入参</h4>
          <div style={{ maxHeight: '300px', overflow: 'auto' }}>
            <CodeMirror
              value={convertInterfaceCommentsToSingleLine(req)}
              theme={aura}
              extensions={[ javascript({ jsx: true }) ]}
            ></CodeMirror>
          </div>


          <h4>出参</h4>
          <div style={{ maxHeight: '300px', overflow: 'auto' }}>
            <CodeMirror
              value={convertInterfaceCommentsToSingleLine(res)}
              theme={aura}
              extensions={[ javascript({ jsx: true }) ]}
            ></CodeMirror>
          </div>
          <h4>Mock</h4>
          <div style={{ maxHeight: '300px', overflow: 'auto' }}>
            <CodeMirror
              value={convertInterfaceCommentsToSingleLine(mock)}
              theme={aura}
              extensions={[ javascript({ jsx: true }) ]}
            ></CodeMirror>
          </div>
        </React.Fragment>
      )
    }
  </React.Fragment>;
}